<template>
    <div>
        <h2>HOME PAGE</h2>
        <p>{{ info.name }}</p>
        <p>{{ age }}</p>
        <button @click="changeAge">changeAge</button>
    </div>
</template>

<script>
import { reactive, toRefs, toRef } from "vue"

export default {
    name: "Home",
    setup() {
        let info = reactive({
            name: "哈哈",
            age: 18
        })
        console.log(info)
        //toRef只转换一个reactive对象中的属性为ref
        //toRef(reactive对象, 要转换的key)
        let age = toRef(info, "age");

        function changeAge() {
            age.value++
        }

        return {
            info,
            age,
            changeAge
        }
    },
}
</script>

<style scoped>

</style>